<template>
  <a-form layout="inline" :model="{}" hide-label class="searc-table-wrap">
    <a-form-item v-for="item of formItem" :key="item.key">
      <template v-if="item.type === 'input_keyword'">
        <a-select v-model="item.key" :style="{ width: (item.keyWidth || '100') + 'px' }">
          <a-option v-for="keyItem of item.keyItems" :key="keyItem.value" :value="keyItem.value">
            {{ keyItem.label }}
          </a-option>
        </a-select>
        <a-input v-model="item.value.value" :placeholder="item.placeholder || item.label" />
      </template>
      <template v-if="item.type === 'input'">
        <a-input v-model="item.value.value" :placeholder="item.label" />
      </template>
      <template v-if="item.type === 'select'">
        <a-select v-model="item.value.value" style="width: 150px" :placeholder="item.label">
          <a-option v-for="optionItem of item.optionItems" :key="optionItem.value" :value="optionItem.value">
            {{ optionItem.label }}
          </a-option>
        </a-select>
      </template>
      <template v-if="item.type === 'date'" :placeholder="item.label">
        <a-date-picker v-model="item.value.value" />
      </template>
      <template v-if="item.type === 'check-group'">
        <a-checkbox-group v-model="item.value.value">
          <a-checkbox v-for="it of item.optionItems" :value="it.value" :key="it.value">
            {{ item.label }}
          </a-checkbox>
        </a-checkbox-group>
      </template>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
  import { defineComponent, PropType } from 'vue'
  import { TableSearchItem } from '@/types/components'
  export default defineComponent({
    name: 'SearchForm',
    props: {
      formItem: {
        type: Array as PropType<TableSearchItem[]>,
        default: () => [],
      },
    },
    emits: ['del'],
    setup(props, { emit }) {
      const del = (data: any) => {
        emit('del', data)
      }
      const clearAll = () => {
        props.formItem.forEach((e: any) => {
          del(e)
        })
      }
      return {
        del,
        clearAll,
      }
    },
  })
</script>

<style lang="less" scoped>
  .searc-table-wrap {
  }
</style>
